<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
    <style>
        .box{
            width: 1226px;
          
            clear: both;
            margin-left: auto;
            margin-right: auto;
        }
        .more{
            float:right;
            color: #424242;
            font-size: 16px;
        }
        .phone-box{
            width: 100%;
            height: 614px;
           display: inline;
        }
        .phone-box-left{
            width: 234px;
            height: 614px;
            
            float: left;
        }
        .phone-box-right{
            width: 940px;
            height: 614px;
           float: right;
        }
        ul{
    list-style-type:none; 
    display:inline;
    float: right;
}
ul li{
    display:inline; 
    float: right; 
}
    </style>
</head>
<body>

    <div id="app">
        <div class="box">
            <div class="phone">
                <h2 class="title">手机<a href="#" class="more">查看更多</a></h2>
                <div class="phone-box">
                    <div class="phone-box-left">
                        <a href=""><img src="ad1.png" alt=""style="display: inline; float: right; ">                                                  
                        </a>
                    </div>
                    <ul>
                        <div class="phone-box-right">
                            <div class="items">
                                <ul href="#">
                                   
                                    <li v-for="phone in phoneList" key="index">
                                        <div><img :src="phone.img" alt=""></div>
                                        <h3>{{phone.title}}</h3>
                                        <p>{{phone.des}}</p>
                                        <p>{{phone.price}}</p>
                                    </li>
                                </ul>
                            </div>
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    

    <script>
        const app = Vue.createApp({
            
            data(){ //定义数据
                return{
                     phoneList:[
                        {
                             title:"Xiaomi 12Pro",   des:"全线拉满的冷血旗舷",   price:"4699起",img:'phone1.png'},
                             {
                        title:"Xiaomi 12",
                        des:"全线拉满的冷血旗舷",
                        price:"3699起",
                        img:'phone2.png'
                    },
                   
   {
                        title:"Xiaomi 12Pro",
                        des:"全线拉满的冷血旗舷",
                        price:"4699起",
                        img:'phone3.png'
                    },
                    {
                        title:"Xiaomi 12",
                        des:"全线拉满的冷血旗舷",
                        price:"3699起",
                        img:'phone4.png'
                    },
                    {
                        title:"Xiaomi 12X",
                        des:"全线拉满的冷血旗舷",
                        price:"2999起",
                        img:'phone5.png'
                    },
                    {
                        title:"Xiaomi 11",
                        des:"全线拉满的冷血旗舷",
                        price:"1899起",
                        img:'phone6.png'
                    },
                    {
                        title:"Redmi Note 11 Pro",
                        des:"全线拉满的冷血旗舷",
                        price:"1799起",
                        img:'phone7.png'
                    },
                    {
                        title:"Redmi Note 11 5G",
                        des:"全线拉满的冷血旗舷",
                        price:"1199起",
                        img:'phone8.png'
                    },
                    
                



                             ]}
                     
                  
                   
                    
                    
                    
                }
            },
        );
        app.mount("#app");
    
    </script>
    
</body>
</html>